<template>
  <div class="app-container">
    <div class="nav">
      <div class="nav-item">
        <span class="item-label">分类：</span>
        <div class="list">
          <ul>
            <li v-for="(item,index) in type" v-if="item.sub" :class="{active:active == item.id}" :key="index" @click="getColumnName(item.sub.columnId,item.name,item)">
              <router-link :to="item.path">{{item.name}}</router-link>
            </li>
          </ul>
        </div>
      </div>
      <div class="nav-item sub-item">
        <span class="item-label">类别：</span>
        <div class="list">
          <ul v-if="$route.path=='/all/periodical'">
            <li v-for="(item,index) in list" :class="{active:$store.state.columnId == item.type_name}" :key="index" @click="loadBook(item)">{{item.type_name}}</li>
          </ul>
          <ul v-else-if="$route.path=='/all/book'">
            <li v-for="(item,index) in list" :class="[item.columnId == columnTwoId?'active':'']" :key="index" @click="bookTwoItem(item.columnId,item)">{{item.columnName}}</li>
          </ul>
          <ul v-else-if="$route.path=='/all/video_music'">
            <li v-for="(item,index) in list" :class="{active:$store.state.videotype == item.columnId}" :key="index" @click="loadBook(item)">{{item.columnName}}</li>
          </ul>
          <ul v-else>
            <li>无</li>
          </ul>
        </div>
      </div>
      <div class="nav-item sub-item" v-if="this.$route.path == '/all/book'&&accId == '3'">
        <div class="list">
          <ul >
            <li v-for="(item,index) in sublist" :class="{'active':$store.state.columnId == item.columnId}" :key="index" @click="loadBook(item)">{{item.columnName}}</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {getFirstLevel,getColumnName,getPeriodicalType,getVideoList} from "@/api/index";
import { GetVideoList } from "@/api/Api";
export default {
  data() {
    return {
      type: [
        {
          name: "图书",
          path: "/all/book",
          resType:1
        },
        {
          name: "期刊",
          path: "/all/periodical",
          resType:5
        },
        {
          name: "报纸",
          path: "/all/newspaper",
          resType:4
        },
        {
          name: "视听",
          path: "/all/video_music",
          resType:3
        },
        {
          name: "悦读",
          path: "/all/read",
          resType:2
        }
      ],
      types:JSON.parse(sessionStorage.getItem('nav')),
      list: [],
      active: null,
      sublist:[],
      VideomusicColumnId:sessionStorage.getItem('VideomusicColumnId'),
      BookColumnId:sessionStorage.getItem('BookColumnId')
    };
  },
  computed:{
    accId(){
      return this.$store.state.user.accId
    },
    columnId(){
      return this.$store.state.columnId
    },
    columnTwoId(){
      if(this.accId=="3"){
          return this.$store.state.columnTwoId   
      }else{
        return this.$store.state.columnId
      }
             
    }
  },
  watch:{
    columnId(){
      this.currentPage = 1
    },
    columnTwoId(){
      this.$router.push(this.$route.path)
    }
  },
  components: {},
  created() {
    this.init();
  },
  methods: {
    //第一次打开
    firstLoad(columnId,item) {
      if (this.$route.path == "/all/book") {
        this.getColumnName('',"图书");
      } else if (this.$route.path == "/all/periodical") {
        this.getColumnName("", "期刊");
      } else if (this.$route.path == "/all/video_music") {
        // debugger;
        this.getColumnName("", "视听");
      }
    },
    //获取图书分类id
    loadBook(item) {
      this.$store.commit("SET_COLUMNID", item.columnId || item.type_name);
      if(this.$route.path == "/all/book"){
        this.$router.push(this.$route.path+'?columnId='+this.$store.state.columnId)
      }
      if(this.$route.path == "/all/video_music"){
        this.$store.commit("SET_VIDEOTYPE", item.columnId );
        // this.$router.push(this.$route.path+'?columnId='+this.$store.state.columnId)
      }
      console.log(this.$store.state.columnId);
    },
    init() {
      //获取一级分类
      let that = this;
          let getFirstLevel = this.types
          let arr = this.type;
          for (var i = 0; i < arr.length; i++) {
            getFirstLevel.forEach(element => {
              // console.log(arr[i].name + "==" + element.columnName);
              if (arr[i].resType == element.resType) {
                arr[i].sub = element;
              }
              // if (arr[i].res == "视听" && element.columnName == "视频") {
              //   arr[i].sub = element;
              // }
              // if (element.resType == 2) {
              //   arr[i].sub = element;
              // }
            });
          this.type = arr;
          console.log(this.type)
          this.firstLoad(arr[0].sub.columnId,arr)
          }
    },
    //获取二级分类
    getColumnName(columnId,name,item) {
      console.log(item)
      if (name == "图书") {
        getColumnName(this.BookColumnId).then(res => {
          console.log(res)
            let list = res.data.data;
            this.list = list
            console.log(this.list,321)
             if(this.$store.state.columnTwoId){
               this.$store.commit('SET_COLUMNTWOID',list[0].columnId)
              this.bookTwoItem(this.columnTwoId)
            }else{
              this.$store.commit('SET_COLUMNID',list[0].columnId)
              console.log(this.$store.state.columnTwoId,123)
              this.bookTwoItem(this.columnTwoId)
             
            }
          })
          .catch(err => {
            console.log(err);
          });
      } else if (name == "期刊") {
        getPeriodicalType()
          .then(res => {
            this.list = res.data.data;
            this.$store.commit("SET_COLUMNID", this.list[0].type_name);
          })
          .catch(err => {});
      } else if (name == "视听") {
            GetVideoList(3,this.VideomusicColumnId).then(res => {
            this.list = res.data;
            this.$store.commit("SET_VIDEOTYPE", this.list[0].columnId);
            console.log('此时videotype==========='+this.$store.state.videotype)
          })
          .catch(err => {});
        }
       
    },
    bookTwoItem(columnId,item){
      if(this.accId == "3"){
        console.log(columnId)
          this.$store.commit('SET_COLUMNTWOID',columnId)
           getColumnName(columnId).then(res => {
             console.log(res.data.data)
             const sublist = res.data.data
                this.sublist = sublist
                if(!this.$route.query.columnId){
                  this.$store.commit('SET_COLUMNID',sublist[0].columnId)
                }
                console.log(this.sublist)
              })
              .catch(err => {
                console.log(err);
              });
      }else{
          this.loadBook(item)
      }
    }
  }
};
</script>
<style lang="less" scoped>
.custom-dz{
  .nav .is-active{
    background: #e93926;
  }
  .nav .sub-item li.active{
    background: #e93926;
  }
}
.select-title {
  height: 40px;
  line-height: 40px;
  background-color: #15c798;
  box-shadow: 0px 0px 6px 0px rgba(242, 240, 222, 0.75);
  margin: 20px 0;
  padding: 0 20px;
  display: flex;
  color: #fff;
  font-size: 16px;
  justify-content: space-between;
  .title-left {
    img {
      vertical-align: middle;
      margin-left: 10px;
    }
    span {
      display: inline-block;
      cursor: pointer;
    }
    span + span {
      margin-left: 30px;
    }
  }
  .title-right {
    font-size: 14px;
  }
}
.nav {
  margin: 20px 0;
  padding:20px;
  background: #fff;
  min-height: 50px;
  border-radius: 10px;
  font-size: 16px;
  .nav-item {
    display: flex;
    padding: 10px 0;
    align-items: center;
    .list {
      overflow: hidden;
      margin-left: 10px;
      cursor: pointer;
      ul {
        padding: 0px;
        float: left;
        li {
          float: left;
          a {
            text-decoration: none;
            color: #000;
            padding: 5px 15px;
            display: inline-block;
          }
        }
      }
    }
  }
  .sub-item {
    li {
      padding: 5px 15px;
    }
    li.active {
      background: #15c798;
      color: #fff;
      border-radius: 20px;
    }
  }
  .nav-item:first-child {
    padding-top: 0px;
    border-bottom: 1px solid #eeeeee;
  }
  .nav-item:nth-child(3) {
    padding-bottom: 10px;
    background: #eeeeee;
    font-size: 14px;

  }
  .is-active {
    background: #15c798;
    color: #fff !important;
    border-radius: 20px;
  }
}
</style>


